<template>
	<!-- 物联设备类别 -->
	<div> 
		<el-row :gutter="20">
			<el-col :span="16">
				<el-row type="flex" justify="space-between">
					<span>物联设备类别</span>
					<div class="more-btns">
						<div style="width:260px;margin-right: 15px;">
							<el-select v-model="value" filterable 
							    placeholder="请选择消防系统"
							    @change="changeItem">
								<el-option
						  	        v-for="item in options"
					                :key="item.id"
					                :label="item.name"
					                :value="item.id">
					            </el-option>
					        </el-select>
					    </div>
						<el-button type="primary" @click="addCategory()">新增</el-button>
					</div>
				</el-row>
				<el-table 
                    :data="TableData"
                    ref="FireEqTableList"
                    border 
                    style="width: 100%">
                    <el-table-column width="50" align="center">
    		    		  <template slot-scope="scope">
    		    		  	<el-radio class="el-radio--nolabel" @change.native="getTemplateRow(scope.$index,scope.row)" v-model="radio" :label="scope.row.id">&nbsp;</el-radio>
    		    		  </template>
    		    	</el-table-column>
    		    	<el-table-column label="序号" type="index" width="50"></el-table-column>
    		    	<el-table-column label="消防系统名称" prop="fireSystemName"></el-table-column>
    		    	<el-table-column label="物联设备类型" prop="name"></el-table-column>
    		    	<el-table-column label="是否高危" prop="isTop">
    		    		<template slot-scope="scope">
    		    			<p>{{ (scope.row.monitorType == '2'||scope.row.monitorType == '1,2') ? '是':'否' }}</p>
    		    		</template>
    		    	</el-table-column>
    		    	<el-table-column label="是否重点" prop="isSupportSendDown">
    		    		<template slot-scope="scope">
    		    			<p>{{ (scope.row.monitorType == '1'||scope.row.monitorType == '1,2') ? '是':'否' }}</p>
    		    		</template>
    		    	</el-table-column>
    		    	<el-table-column label="备注" prop="remarks"></el-table-column>
    		    	<el-table-column label="列表图片" >
    		    		<template v-if="JSON.parse(scope.row.icon).icon != ''" slot-scope="scope">
    		    			<img :src="JSON.parse(scope.row.icon).icon.split(',')[0]" width="50px" height="50px" @click="$imgPreview" :data-imgpreview="JSON.parse(scope.row.icon).icon.split(',')[0]">
    		    		</template>
    		    	</el-table-column>
    		    	<el-table-column label="详细图片" prop="detailIcon">
    		    		<template v-if="JSON.parse(scope.row.icon).detailIcon != ''" slot-scope="scope">
    		    			<img :src="JSON.parse(scope.row.icon).detailIcon.split(',')[0]" width="50px" height="50px" @click="$imgPreview" :data-imgpreview="JSON.parse(scope.row.icon).detailIcon.split(',')[0]">
    		    		</template>
    		    	</el-table-column>
    		    	<el-table-column label="操作" width="150">
    		    	   	<template slot-scope="scope">
    		    	   		<el-button @click="showSon(scope.row)" type="text" size="small">子集</el-button>
							   <span class="dividing-line">|</span>
    		    	   		<el-button @click="editCategory(scope.row)" type="text" size="small">编辑</el-button>
							   <span class="dividing-line">|</span>
    		    	   		<el-button @click="deleteFireStation(scope.row)" type="text" size="small">删除</el-button>
    		    	   	</template>
    		    	</el-table-column>
    		    	 <el-table-column type="expand" width='1'>
    		    	 	<template slot-scope="scope">
    		    	 		<subset-table :parentselected.sync="radio" :changeItem="getTemplateRow" :rowInfo="scope.row"></subset-table>
    		    	 	</template>
    		    	 </el-table-column>
               </el-table>
               <!-- 分页 -->
               <el-pagination 
                   background
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page.sync="currentPage"
                   :page-sizes="[10, 50, 100]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
              </el-pagination>

               <!-- 新增/编辑弹框  -->
               <el-dialog
				  :close-on-click-modal="false"
                  :title="dialogCategoryTitle"
                  width="600px"
                  top='10vh'
                  v-if="dialogCategoryBaseInfo"
                  :visible.sync="dialogCategoryBaseInfo"
                  @close="closeCategoryInfo"
                  v-dialogDrag>
                  <update-fire-ctl-category :oldInfo="categoryInfo" :closeFun="closeCategoryInfo">
                  </update-fire-ctl-category>
              </el-dialog>
			</el-col>
			<el-col :span="8">
				<div>
				      <el-row type="flex" justify="space-between">
				      	<span>物联设备关联属性</span>
				      	<div class="more-btns">
				      		<el-button type="primary" @click="addCategoryAttr()">新增</el-button>
				      		<el-button type="primary" @click="deleteAll()">批量删除</el-button>
					    </div>
				     </el-row>
				     <el-table
                     ref="multipleTable"
                     :data="assignFcfPTable"
                     tooltip-effect="dark"
                     style="width: 100%"
                     @selection-change="handleSelectionChange">
                     <el-table-column type="selection" width="55"></el-table-column>
                     <el-table-column label="序号" type="index" width="50"></el-table-column>
                     <el-table-column prop="name" label="属性姓名" width="120"></el-table-column>
                     <el-table-column prop="code" label="属性编码" width="120"></el-table-column>
                     <el-table-column prop="unit" label="单位" width="120"></el-table-column>
                     <el-table-column label="操作" width="">
    		    	   	<template slot-scope="scope">
    		    	   		<el-button @click="deletAttrRow(scope.row)" type="text" size="small">删除</el-button>
    		    	   	</template>
    		    	</el-table-column>
                  </el-table>
				</div>
				<div style="margin-top:25px">
					 <el-row type="flex" justify="space-between">
				      	<span>消防设置状态</span>
				      </el-row>
				      <el-table 
				       ref="multipleTable"
                       :data="assignFcStatusTable"
                       tooltip-effect="dark"
                       style="width: 100%">
                       <el-table-column prop="fcfsStatusName" label="父名称" width="200">
                       </el-table-column>
                       <el-table-column prop="fcfsStatusName" label="子名称" width="240">
                       </el-table-column>
                       <el-table-column prop="fcfsStatusUrl" label="子图">
                       	<template v-if="scope.row.fcfsStatusUrl != ''" slot-scope="scope">
    		    			<img :src="scope.row.fcfsStatusUrl" width="50px" height="50px" @click="$imgPreview" :data-imgpreview="scope.row.fcfsStatusUrl">
    		    		</template>
    		    	 </el-table-column>
                  </el-table>
				</div>
				<!-- 新增 -->
				<el-dialog
      			  :close-on-click-modal="false"
                  :title="dialogCategoryAttrTitle"
                  width="600px"
                  top='10vh'
                  v-if="dialogCategoryAttrBaseInfo"
                  :visible.sync="dialogCategoryAttrBaseInfo"
                  @close="closeCategoryAttrInfo"
                  v-dialogDrag>
                  <add-fire-ctl-category-attr :selectedList="attribudeSelected" :categoryId="categoryInfoId" :closeFun="closeCategoryAttrInfo">
                  </add-fire-ctl-category-attr>
              </el-dialog>
			</el-col>
		</el-row>
    </div>
</template>
<script>
import util from '@/utils/util'
import { getFireCtlCategoryList,getAssignFcfP,delAssignFcfP } from '@/api/sysConfig'
import { getFireCtlFacsCategoryStatus,delFcfC } from '@/api/sysConfig'
import UpdateFireCtlCategory from './Dialog/UpdateFireCtlCategory'
import addFireCtlCategoryAttr from './Dialog/addFireCtlCategoryAttr'
import SubsetTable from './PageModel/SubsetTable'

export default {
	name: '',
	components: {
       UpdateFireCtlCategory,
       addFireCtlCategoryAttr,
       SubsetTable,
    },
	created() {
		var self = this
		/* 获取类型 */
		util.ilinkArrHandle.delDicArr_keyVal(55, function(arr){
            var array = {
				id: '',
				name: "全部消防系统",
			};
			self.options = arr;
			self.options.unshift(array);
        })
		self.getTableList();
	},
	data() {
		return {
			radio: 0,
			loading: false,
			fireSystemId:'',
			value:'',
			listId:[],
			/* 分页 */
            currentPage: 1,
            pageSize: 10,
            total: 0,
			options:[],
			TableData: [],
			assignFcfPTable:[],
			assignFcStatusTable:[],
			/* 弹框 */
			dialogCategoryTitle:'',
			dialogCategoryBaseInfo: false,
			categoryInfo:'',
			dialogCategoryAttrTitle:'',
			dialogCategoryAttrBaseInfo:false,
			categoryInfoId:'',
			attribudeSelected: [],
		}
	},
	methods: {
		getTemplateRow(index,row) {
			var self = this;
			self.radio = row.id;
			self.getAssignFcfPList();
			self.getStatusList();
		},
		/* 获取列表数据 */
		getTableList(pageIndex,pageSize) {
			var self = this;

			self.loading = true;
			if (pageIndex) {
				self.currentPage = pageIndex;
			}
			if (pageSize) {
				self.pageSize = pageSize;
			}
			var paramList = {
				queryType: 1,
				pageIndex: self.currentPage-1,
				pageSize: self.pageSize,
				id: 0,
				fireSystemId: self.fireSystemId,
			};
			getFireCtlCategoryList(paramList).then(res => {
				self.TableData = res.data;
				self.total = res.total;
				if (res.data.length > 0) {
					self.radio = res.data[0].id;
				} else {
					self.radio = 0;
				}
				self.loading = false;
				self.getAssignFcfPList();
				self.getStatusList();
			});
		},
		getAssignFcfPList() {
			var self = this;
			var params = {
				id: self.radio,
				order: 'asc'
			};
			getAssignFcfP(params).then(res => {
				self.assignFcfPTable = res.data;
				if (res.data.length > 0) {
					self.attribudeSelected = res.data;
				} else {
					self.attribudeSelected = [];
				}
			});
		},
		getStatusList() {
			var self = this;
			var param = {
				categoryId: self.radio,
				order: 'asc'
			};
			getFireCtlFacsCategoryStatus(param).then(res => {
				self.assignFcStatusTable = res.data;
			});
		},
		handleSelectionChange(val) {
			var self = this;
			var obj = {};
			if (val.length == 1 ) {
				obj.name = val[0].name;
				obj.code = val[0].code;
				obj.id = val[0].id;
				obj.unit = val[0].unit;
				self.listId.push(obj);
			} else if (val.length > 1) {  // 全选
				self.listId = [];
				for (var i = 0; i < val.length; i++) {
					obj = {};
					obj.name = val[i].name;
					obj.code = val[i].code;
					obj.id = val[i].id;
					obj.unit = val[i].unit;

					self.listId.push(obj);
				}
			} else { 
				self.listId = [];
			}
		},
		/*下拉框筛选*/
		changeItem(selVal) {
			var self = this;
			self.fireSystemId = selVal;
			self.getTableList();
		},
		/*新增类别*/
		addCategory() {
			var self = this;
			self.dialogCategoryTitle = "新增物联设备类别";
			self.dialogCategoryBaseInfo = true;
			self.categoryInfo = {};
		},
		/* 编辑类别 */
		editCategory(row) {
			var self = this;
			self.dialogCategoryTitle = "编辑物联设备类别";
			self.dialogCategoryBaseInfo = true;
			self.categoryInfo = row;
		},
		/*关闭类别弹框*/
		closeCategoryInfo(flag) {
			var self = this;
			self.dialogCategoryBaseInfo = false;
			if(typeof(flag) === 'boolean' && flag) {
				self.getTableList(this.categoryInfo.id?'':1);

			}
		},
		addCategoryAttr() {
			var self = this;
			self.dialogCategoryAttrTitle = '物联设备属性库操作';
			self.dialogCategoryAttrBaseInfo = true;
			self.categoryInfoId = self.radio;
		},
		closeCategoryAttrInfo(flag) {
			var self = this;
			self.dialogCategoryAttrBaseInfo = false;
			if (typeof(flag) === 'boolean' && flag) {
				self.getTableList();
			}
		},
		deletAttrRow(row) {
			var self = this;
			self.$confirm("确定删除该物联设备类别关联属性吗？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                roundButton: true
            }).then(() => {
            	delAssignFcfP({ids: row.id}).then(res => {
            	    if (res.status === 200) {
            	    	self.$message({
            	    		type: 'success',
                            message: '删除成功!'
                        });
                        self.getAssignFcfPList()
                    } else {
                        self.$message.error(res.info);
                    }
            	});
            });
		},
		deleteAll() {
			var self = this;
			var ids = [];
			for (var i = 0; i < self.listId.length; i++) {
				ids.push(self.listId[i].id);
			}
			if (ids.length <= 0) {
				self.$message.error('请至少选择一项进行删除！');
				return false;
			}
			self.$confirm("确定删除该物联设备类别关联属性吗？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                roundButton: true
            }).then(() => {
            	delAssignFcfP({ids: ids.join(',')}).then(res => {
            	    if (res.status === 200) {
            	    	self.$message({
            	    		type: 'success',
                            message: '删除成功!'
                        });
                        self.getAssignFcfPList()
                    } else {
                        self.$message.error(res.info);
                    }
            	});
            });
		},
		/* 删除物联设备类别 */
		deleteFireStation(row) {
			var self = this;
			self.$confirm("确定删除该物联设备类别吗？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                roundButton: true
            }).then(() => {
            	delFcfC({id: row.id}).then(res => {
            		if (res.status === 200) {
            	    	self.$message({
            	    		type: 'success',
                            message: '删除成功!'
                        });
                        self.getTableList()
                    } else {
                        self.$message.error(res.info);
                    }
            	});
            });
		},
		handleSizeChange(pageSize) {
			this.getTableList(1,pageSize);
		},
		handleCurrentChange(currentPage) {
            this.getTableList(currentPage)
        },
        // 展开子集
        showSon(row) {
            this.$refs.FireEqTableList.toggleRowExpansion(row);
        },
	},
	watch: {
		radio: {
		  handler(val) {
		  	this.$emit('update:parentselected', val);
		  },
		  deep: true,
		}
	}
}
</script>